<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain">
                <div v-for="(item,index) in detail" :key="index">
                    <div v-if="index>=1" style="page-break-after: always"></div>
                    <table style="border-collapse: collapse;border-spacing: 0;">
                        <thead style="margin-top: 20px; display: table-header-group;">
                            <tr style="display:block;margin:30px;"></tr>
                            <tr style="font-size:20px;">
                                <th class="padding" colspan="6" style="text-align:end">{{item.factory_referred_as}}</th>
                                <th class="colLeft padding" colspan="5" style="padding-left:40px">缝挑结算单</th>
                            </tr>
                            <tr style="font-size:18px;">
                                <th class="padding" colspan="14" style="text-align:end">No:{{item.statement_no}}</th>
                                <th class="" style="border:20px solid #FFF" colspan="1"></th>
                            </tr>
                            <tr>
                                <th class="colLeft padding" colspan="2">承制人:{{item.referred_as}}</th>
                                <th class="colLeft padding" colspan="3">结算月份:{{item.month}}</th>
                                <th class="colLeft padding" colspan="3">结算日期:{{item.statement_date}}</th>
                                <th class="colLeft padding" colspan="3">付款日期:{{item.pay_time}}</th>
                                <th class="colLeft padding" colspan="3">预付金额</th>
                            </tr>
                            <tr>
                                <th class="colLeft padding" colspan="2">应付:{{item.total_amount}}</th>
                                <th class="colLeft padding" colspan="3">付款比例:100%</th>
                                <th class="colLeft padding" colspan="3">补扣:{{item.deduction_amount}}</th>
                                <th class="colLeft padding" colspan="3">实付小写:{{item.goods_amount}}</th>
                                <th class="colLeft padding" colspan="3">实付大写:{{item.goods_amount_chinese}}</th>
                            </tr>
                            <tr>
                                <th class="colLeft padding" colspan="13">备注:{{item.remark}}</th>
                            </tr>
                            <tr>
                                <th class="colLeft padding" colspan="13">收款人银行卡姓名:{{item.account_info && item.account_info.bank_head}}</th>
                            </tr>
                            <tr>
                                <th class="colLeft padding" colspan="13">银行卡号:{{item.account_info && item.account_info.bank_account}}</th>
                            </tr>
                            <tr>
                                <th class="thCss">合同号</th>
                                <th class="thCss">批次号</th>
                                <th class="thCss">发制工序</th>
                                <th class="thCss">发货数</th>
                                <th class="thCss">收货数</th>
                                <th class="thCss">返工数</th>
                                <th class="thCss">待收数</th>
                                <th class="thCss">单价</th>
                                <th class="thCss">单位</th>
                                <th class="thCss">补/扣</th>
                                <th class="thCss">应付</th>
                                <th class="thCss">实付</th>
                                <th class="thCss" style="width:130px">最后收货</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item1,index1) in item.detail" :key="index1">
                                <td class="thCss">{{item1.contract_no}}</td>
                                <td class="thCss">{{item1.batch_number}}</td>
                                <td class="thCss">{{item1.two_process_title}}</td>
                                <td class="thCss">{{item1.weaving_num==0?'':item1.weaving_num}}</td>
                                <td class="thCss">{{item1.take_num==0?'':item1.take_num}}</td>
                                <td class="thCss">{{item1.rework_num==0?'':item1.rework_num}}</td>
                                <td class="thCss">{{item1.pending_num==0?'':item1.pending_num}}</td>
                                <td class="thCss">{{item1.price}}</td>
                                <td class="thCss">{{item1.unit_name}}</td>
                                <td class="thCss">{{item1.deduction_amount==0?'':item1.deduction_amount}}</td>
                                <td class="thCss">{{item1.total_amount}}</td>
                                <td class="thCss">{{item1.pay_amount==0?'':item1.pay_amount}}</td>
                                <td class="thCss">{{item1.last_take_date}}</td>
                            </tr>
                            <tr>
                                <td colspan="3" style="text-align:end">合计</td>
                                <td>{{item.total_count}}</td>
                                <td>{{item.take_num_count}}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>{{item.total_amount}}</td>
                                <td></td>
                            </tr>
                            <!-- <div style="page-break-before: always;"></div> -->
                        </tbody>
                    </table>
                </div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '缝挑结算单',
					show: '打印',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:[],
                show:false
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            async setData(data){
                var res = await this.$API.print.setPrint.get({statement_no:data.statement_no});
                console.log('res :>> ', res);
                this.detail = res.data
                console.log('this.detail :>> ', this.detail);
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
.thCss{
    border:1px solid #000000;
    min-width: 80px;
    text-align: center;
    white-space: normal; /* 或者使用 normal 和 wrap 根据需求 */
    word-wrap: break-word; /* 旧版浏览器的兼容性 */
    overflow-wrap: break-word; 
}
th,td{
    width: 100px;
    border:1px solid #000000;
    text-align: center;
}
td{
    max-width: 130px;
}
tr {
    page-break-inside: avoid;
}
.colLeft{
    text-align: start;
    border: none;
}
.padding{
    padding: 5px 0;
    border: none;
}
</style>
